<template>
  <section style="display:inline-block;margin-left:10px">
    <el-dropdown
      class="btn-dropdown"
      v-bind="$attrs"
      @command="onExportFile"
    >
      <el-button
        type="primary"
        icon="el-icon-download"
        class="btn"
      >
        导出底表
        <i class="el-icon-arrow-down el-icon--right" />
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command="1">Excel</el-dropdown-item>
        <el-dropdown-item :command="2">CSV</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <down-dialog
      :show="showDownDialog"
      @handleClose="showDownDialog=false"
    />
  </section>
</template>
<script>
import DownDialog from '@/components/common/DownDialog';
export default {
  name: 'MultipleDownloadBottom',
  components: {
    DownDialog
  },
  props: {
    // 报表类型
    api: {
      type: Function,
      default: () => {},
      requrie: true
    },
    formData: {
      type: Object,
      default: () => ({}),
      requrie: true
    }
  },
  data() {
    return {
      showDownDialog: false
    };
  },
  methods: {
    // 导出底表触发
    getEndFiles(params) {
      this.api(params).then(res => {
        if (res.resultCode === '0000') {
          this.showDownDialog = true;
        }
      }).finally(() => {
        this.exportingBottom = false;
      });
    },
    onExportFile(downType) {
      this.showDownDialog = true;
      const params = {
        ...this.formData,
        exportFormat: downType,
        exportType: 2
      };
      this.getEndFiles(params);
    }
  }
};
</script>
